<template lang="">
    <div class="box" >
       <div class="box" ref="box"></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.echar()
    },
    methods: {
        echar() {
            let mychart = echarts.init(this.$refs.box)
            // let mycolor=['#0974cb','#8f475e','#5cc4d8','#86694b','#584da4']
            let option = {
                color:['#1089e7','#f57474'],
                title:{
                  text:'大洲感染人数饼状图',
                  left:"50%",
                  textAlign:"center",
                  textStyle:{
                    color:'#fff'
                  }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '85%',
                    left: 'center',
                    textStyle:{
                        color:'#fff'
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 300, name: '北美洲' },
                            { value: 40, name: '南美洲' },

                        ]
                    }
                ]
            }
            mychart.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    width: 400px;
    height: 220px;
    // border: 1px solid #000;
}
</style>